<template>
	<view class="page px22">
		<!-- 导航栏 -->
		<!-- <uni-nav-bar backgroundColor="#F7F7F7" color="#222" left-icon="left" leftWidth="50rpx" :border="false"
			@clickLeft="back" statusBar title="农药使用记录" fixed></uni-nav-bar> -->
		<!-- 导航栏 -->

		<u--form :model="formData" ref="form" :rules="rules" errorType="toast">
			<view class="bgWhite br20 mb10">
				<view @click="open" :class="['flex', 'flex-between,px30', 'align-center']" :key="time">
					<u-form-item class="flex1" :labelWidth="190" label="日期">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请选择" disabled="" v-model="date" />
					</u-form-item>
					<image style="width: 15rpx; height: 27rpx" src="@/static/form/left.png" mode=""></image>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="name">
					<u-form-item class="flex1" :labelWidth="190" label="农药名称" prop="fl_name">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入农药名称" v-model="formData.name" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="component">
					<u-form-item class="flex1" :labelWidth="190" label="有效成分种类及含量" prop="component">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入有效成分" v-model="formData.component" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="no">
					<u-form-item class="flex1" :labelWidth="190" label="登记证号" prop="no">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入证号" v-model="formData.no" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="work">
					<u-form-item class="flex1" :labelWidth="190" label="销售单位" prop="work">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入销售单位" v-model="formData.work" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="dosage_form">
					<u-form-item class="flex1" :labelWidth="190" label="农药剂型" prop="dosage_form">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入剂型" v-model="formData.dosage_form" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="spec">
					<u-form-item class="flex1" :labelWidth="190" label="包装规格" prop="spec">
						<u-input border="false" input-align="right" placeholder-style="text-align:right" placeholder="请输入包装规格" v-model="formData.spec" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="buy_num">
					<u-form-item class="flex1" :labelWidth="190" label="购买数量" prop="buy_num">
						<u-input border="false" type="number" input-align="right" placeholder-style="text-align:right" placeholder="请输入购买数量" v-model="formData.buy_num" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="out_num">
					<u-form-item class="flex1" :labelWidth="190" label="出库数量" prop="out_num">
						<u-input border="false" type="number" input-align="right" placeholder-style="text-align:right" placeholder="请输入出库数量" v-model="formData.out_num" />
					</u-form-item>
				</view>
			</view>

			<view class="bgWhite br20 mb10">
				<view :class="['flex', 'flex-between,px30', 'align-center']" :key="stock">
					<u-form-item class="flex1" :labelWidth="190" label="库存数量" prop="stock">
						<u-input border="false" type="number" input-align="right" placeholder-style="text-align:right" placeholder="请输入库存数量" v-model="formData.stock" />
					</u-form-item>
				</view>
			</view>
		</u--form>

		<view @click="submit" class="flex mt94 flex-center align-center br83 btnBg" :style="{ background: '#1F9A64', height: '90rpx' }">
			<text :style="{ color: '#fff' }">提交</text>
		</view>

		<uni-calendar ref="calendar" :insert="false" :end-date="endDate" @confirm="confirm" />
	</view>
</template>

<script>
import formMixin from "../../utils/formMixin"
export default {
	mixins: [formMixin],
	data() {
		return {
			log_type:1,
			show: false,
			formData: {
				type: 2,
				time: "",
				out_num: "",
				stock: "",
				buy_num: "",
				work: "",
				component: "",
				dosage_form: "",
				name: "",
				spec: "",
				no: "",
			},
			rules: {
				name: [
					{
						required: true,
						message: "请填写肥料名称名称",
						trigger: ["blur", "change"],
					},
				],
				// out_num: [{
				// 	required: true,
				// 	message: '请填写出库数量',
				// 	trigger: ['blur', 'change']
				// }],
				// stock: [{
				// 	required: true,
				// 	message: '请填写库存数量',
				// 	trigger: ['blur', 'change']
				// }],
				// buy_num: [{
				// 	required: true,
				// 	message: '请填写购买数量',
				// 	trigger: ['blur', 'change']
				// }],
				work: [
					{
						required: true,
						message: "请填写销售单位",
						trigger: ["blur", "change"],
					},
				],
				time: [
					{
						required: true,
						message: "请选择时间",
						trigger: ["blur", "change"],
					},
				],
			},
		}
	},
	computed: {
		endDate: {
			get() {
				const d = new Date()
				const year = d.getFullYear()
				let month = d.getMonth() + 1
				month = month < 10 ? `0${month}` : month
				const date = d.getDate()
				return `${year}-${month}-${date}`
			},
		},
		date: {
			get() {
				if (this.formData.time) {
					return uni.$u.timeFormat(this.formData.time, "yyyy-mm-dd")
				} else {
					return ""
				}
			},
			set(val) {
				this.formData.time = new Date(val).getTime() / 1000
			},
		},
	},
	onLoad(options) {
		if (options.id) {
			this.getFormData(options.id)
			this.$set(this.formData, "id", options.id)
		}
	},
	methods: {
		getFormData(id) {
			this.$http({
				url: "/Data/log_detail",
				data: {
					id: id,
					log_type: 1,
				},
				loading: true,
			}).then((res) => {
				for (let key in this.formData) {
					this.formData[key] = res.data[key]
					this.formData.type = 2
				}
			})
		},
		open() {
			this.$refs.calendar.open()
		},
		close() {
			this.$refs.calendar.close()
		},
		confirm(e) {
			this.date = e.fulldate
		},
		submit() {
			this.$refs.form
				.validate()
				.then((res) => {
					this.$http({
						url: "/Data/add_stock_log",
						data: this.formData,
						loading: true,
					}).then((res) => {
						if (this.formData.id) {
							uni.showToast({
								title: "编辑成功",
								icon: "success",
								mask: true,
							})
						} else {
							uni.showToast({
								title: "添加成功",
								icon: "success",
								mask: true,
							})
						}

						setTimeout(() => {
							uni.navigateBack({})
						}, 1000)
					})
				})
				.catch((errors) => {})
			// this.$refs.form.validate((res) => {
			// 	console.log(res,'朋友同意同意同意')

			// })
		},
		back() {
			uni.navigateBack({})
		},
	},
}
</script>

<style lang="scss" scoped>
/deep/ .uni-navbar__header-container-inner {
	justify-content: left !important;
}

/deep/ .uni-nav-bar-text {
	font-size: 36rpx !important;
}

::v-deep .u-input {
	background-color: #fff !important;
}

::v-deep .u-form-item {
	flex: 1 !important;
}

::v-deep .u-form-item__body__left {
	height: 75rpx;
}

::v-deep .u-radio {
	margin-right: 22rpx;
}
</style>
